<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>双向绑定</title>
	</head>

	<body>
		<p>
			表单的值为:<span id="value"></span>
		</p>
		<input type="text" onkeyup="onKeyUp(event)" id="inputValue">
		<script>
			/*const obj = {
				value: ""
			}

			function onKeyUp(event) {
				obj.value = event.target.value
			}
			//拦截obj的value属性
			Object.defineProperty(obj, 'value', {
				get: function() {
					return value
				},
				set: function(newValue) {
					value = newValue;
					document.getElementById('value').innerHTML = newValue;
					document.getElementById('inputValue').value = newValue;
				}
			})*/

			const obj = {}
			const newObj = new Proxy(obj, {
				get: function(target, key, receiver) {
					return Reflect.get(target, key, receiver)
				},
				set: function(target, key, value, receiver) {
					if(key === 'value') {
						document.getElementById('value').innerHTML = newValue;
						document.getElementById('inputValue').value = newValue;
					}
					return Reflect.set(target, key, value, receiver)
				}
			})

			function onKeyUp(event) {
				newObj.value = event.target.value
			}
		</script>
	</body>

</html>